<template>
      <qf-table :tableLoading="tableLoading" :tableData="tableData" :columns="columns">
        <!-- 产品图片 -->
        <template v-slot:orderDetail[0].imageUrl="{row}">
            <img :src="row.orderDetail[0].imageUrl" height="30" width="100" alt="">
        </template>
        <!-- 操作按钮 -->
        <template v-slot:action="{row}">
            <el-button :disabled="row.order_status===4 || row.pay_status==1" @click="pay(row)" size="small" type="primary">去支付</el-button>
            <el-button size="small" type="danger">删除</el-button>
       </template>
       <!-- 支付状态 -->
       <template v-slot:pay_status="{row}">
             {{row.pay_status===0 ? "未支付" : "已支付"}}
        </template>
           <!-- 订单状态 -->
        <template v-slot:order_status="{row}">
               {{orderStatus(row)}}
        </template>
    </qf-table>
      
</template>
<script setup>
import * as api from "@/api/pay"
import qfTable from "@/components/jwTable/index.vue"
import {ref} from "vue"
import {useRouter} from "vue-router"
let router=useRouter()
//定义表格的列
let columns=ref([
    {
        label:"产品图片",
        prop:"orderDetail[0].imageUrl"
    },
    {
        label:"订单编号",
        prop:"order_id"
    },
    {
        label:"产品名称",
        prop:"orderDetail[0].productName"
    },
    {
        label:"数量",
        prop:"orderDetail[0].quantity",
        width:"70px"
    },
    {
        label:"总价格",
        prop:"total_fee",
        width:"100px"
    },
    {
        label:"创建时间",
        prop:"create_time",
        width:"200px"
    },
    {
        label:"支付状态",
        prop:"pay_status"
    },
    {
        label:"订单状态",
        prop:"order_status"
    },
    {
        label:"操作",
        prop:"action"
    },
])
//表格数据
let tableData=ref([])
//请求数据
//声明loading加载动画
let tableLoading=ref(false)
let getList=async()=>{
    tableLoading.value=true
    try{
        let res=await api.getOrderApi()
        tableData.value=res.data.data
        tableLoading.value=false
    }catch(e){
        tableLoading.value=false
    }
}
getList()
//订单状态
//订单状态：0未提交 1提交成功 2已经取消 3无效订单 4交易关闭 5退货
let orderStatus=(row)=>{
    switch (row.order_status){
        case 0:
            return '未提交'
        case 1:
            return '提交成功'
        case 2:
            return '已经取消'
        case 3:
            return '无效订单'
        case 4:
            return '交易关闭'
        case 5:
            return '退货'
    }
}
//去支付
let pay=(row)=>{
    //跳转到支付页面，通过query携带当前的order_id
    router.push('/pay/payment?order_id='+row.order_id)
}
</script>
<script>
export default{
    meta:{
        title: 'order',
         name: '订单管理',
         routeName:"order",
         icon:"icon-dd"
    }
}
</script>